<template>
  <div class="index">
    <!-- 头部 -->
    <div class="index_top">
      <div class="index_tab">
        <div
          class="tab_list"
          v-for="(item, index) in tabList"
          :key="index"
          :class="tabId == index ? 'select' : ''"
          @click="changeTab(index, item.name, item.type)"
        >
          {{ item.name }}
        </div>
      </div>
      <img
        src="@/assets/index/search.png"
        class="search_image"
        @click="linkUrl('search')"
      />
      <span class="login_text" v-if="!ifLogin" @click="linkUrl('sign')"
        >登录</span
      >
      <img
        v-else
        src="@/assets/index/message.png"
        class="mess_image"
        @click="linkUrl('message')"
      />
    </div>
    <!-- banner_box -->
    <div class="index_banner">
      <el-carousel class="img_box">
        <el-carousel-item v-for="(item, index) in adsList" :key="index">
          <img :src="coverUrl(item.cover)" @click="toUrl(item.url)" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 重磅推荐 -->
    <div class="index_recomm" v-if="recommList && recommList.length>0">
      <div class="common_title" style="marginBottom:0.2rem">
        <div class="common_left">重磅推荐</div>
        <img src="@/assets/index/right.png" class="common_right" @click="linkPage('bookList', '重磅推荐', 1)"/>
      </div>
      <div class="recomm_list" v-for="(item, index) in recommList" :key="index" @click="linkDet('bookDet',item.id)">
        <img
          class="recomm_cover"
          :src="coverUrl(item.cover)"
          @error="errImg('book')"
        />
        <div class="recomm_con">
          <div class="recomm_name">
            {{ item.name }}
          </div>
          <div class="recomm_author">
            {{ item.author ? item.author : "暂无" }}
          </div>
          <div class="recomm_rate">
            <el-rate
              v-model="item.score"
              disabled
              text-color="#FFE400"
              :colors="starColor"
              style="float:left;marginTop:0.03rem;margin-right:0.1rem;"
            ></el-rate>
            <span class="score_text">{{ item.resourceScore }}</span>
            <span class="rate_num">{{ item.commentNum }}人评分</span>
          </div>
          <div class="recomm_intro">{{ item.synopsis }}</div>
        </div>
      </div>
    </div>
    <!-- 新书速递 -->
    <div class="index_book">
      <div class="common_title">
        <div class="common_left">新书速递</div>
        <img src="@/assets/index/right.png" class="common_right" @click="linkPage('bookList', '新书速递', 2)"/>
      </div>
      <div class="book_wrap">
        <div class="book_list" v-for="(item, index) in newList" :key="index" @click="linkDet('bookDet',item.id)">
          <img
            :src="coverUrl(item.cover)"
            @error="errImg('book')"
            class="book_cover"
          />
          <div class="book_bottom">
            <div class="book_name">
              {{ item.name }}
            </div>
            <div class="book_author">
              {{ item.author ? item.author : "暂无" }}
            </div>
            <div class="book_rate">
              <el-rate
                v-model="item.score"
                disabled
                text-color="#FFE400"
                :colors="starColor"
                style="float:left;marginTop:0.03rem"
              ></el-rate>
              <span class="score_text">{{ item.resourceScore }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 华夏好书 -->
    <div class="index_book">
      <div class="common_title">
        <div class="common_left">华夏好书</div>
        <img src="@/assets/index/right.png" class="common_right" @click="linkPage('bookList', '华夏好书', 3)"/>
      </div>
      <div class="book_wrap">
        <div class="book_list" v-for="(item, index) in goodList" :key="index" @click="linkDet('bookDet',item.id)">
          <img
            :src="coverUrl(item.cover)"
            @error="errImg('book')"
            class="book_cover"
          />
          <div class="book_bottom">
            <div class="book_name">
              {{ item.name }}
            </div>
            <div class="book_author">
              {{ item.author ? item.author : "暂无" }}
            </div>
            <div class="book_rate">
              <el-rate
                v-model="item.score"
                disabled
                text-color="#FFE400"
                :colors="starColor"
                style="float:left;marginTop:0.03rem"
              ></el-rate>
              <span class="score_text">{{ item.resourceScore }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 视频读书 -->
    <div class="index_video">
      <div class="common_title">
        <div class="common_left">视频读书</div>
        <img src="@/assets/index/right.png" class="common_right" @click="linkVideo('home','视频', 4)"/>
      </div>
      <div class="video_wrap">
        <div class="video_list" v-for="(item, index) in mateList" :key="index">
          <div class="video_item" @click="linkDet('videoDet',item.id)">
            <img
              :src="coverUrl(item.cover)"
              class="video_cover"
              v-if="item.cover"
            />
            <img
              :src="coverUrl(item.imgPath,'file')" 
              v-else-if="item.imgPath"
              class="video_cover"
            />
            <img
              src="@/assets/common/default_video.png"
              v-else
              class="video_cover"
            />
            <img src="@/assets/index/video_icon.png" class="video_icon" />
          </div>
        </div>
      </div>
    </div>
    <!-- 经典套书 -->
    <div class="index_book">
      <div class="common_title">
        <div class="common_left">经典套书</div>
        <img src="@/assets/index/right.png" class="common_right" @click="linkPage('bookList', '经典套书', 4)"/>
      </div>
      <div class="book_wrap">
        <div
          class="book_list"
          v-for="(item, index) in classicsList"
          :key="index"
          @click="linkDet('bookDet',item.id)"
        >
          <img
            :src="coverUrl(item.cover)"
            @error="errImg('book')"
            class="book_cover"
          />
          <div class="book_bottom">
            <div class="book_name">
              {{ item.name }}
            </div>
            <div class="book_author">
              {{ item.author ? item.author : "暂无" }}
            </div>
            <div class="book_rate">
              <el-rate
                v-model="item.score"
                disabled
                text-color="#FFE400"
                :colors="starColor"
                style="float:left;marginTop:0.03rem"
              ></el-rate>
              <span class="score_text">{{ item.resourceScore }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { getAdsList, getRecommendAPI } from "@/api/index.js";
import { freeCourseAPI } from "@/api/course.js";
import utils from "@/utils/utils.js";
import { starColor, tabList, code } from "@/utils/static";

export default {
  name: "index",
  data() {
    return {
      starColor,
      value: 4,
      adsList: [],
      count: null, //消息数量
      tabList,
      code, //静态资源类型
      tabId: 0,
      utils: utils,
      recommList: [],
      newList: [],
      goodList: [],
      mateList: [],
      classicsList: [],
      ifLogin: false
    };
  },
  created() {
    window.scrollTo(0,0)
  },
  mounted() {
    window.scrollTo(0,0)
    this.getAds(); //轮播图
    this.getRecommBook(); //重磅推荐
    this.getNewBook(); //新书速递
    this.getGoodBook(); //华夏好书
    this.getMeta(); //视频读书
    this.getClassicBook(); //经典套书
    localStorage.getItem("y-token")
      ? (this.ifLogin = true)
      : (this.ifLogin = false);
  },
  methods: {
    changeTab(index, name, type) {
      if(index > 0) {
        //tab切换
        this.tabId = index;
        this.navigationFuc("home", { name, type });
      }
    },
    linkVideo(pageName, name, type) {
      this.navigationFuc(pageName, { name, type })
    },
    getAds() {
      //获取轮播图
      getAdsList({ num: 4, code: "sylbt" }).then(res => {
        if (res.data.code == 0) {
          this.adsList = res.data.data;
        } else {
          Toast(res.data.msg);
        }
      });
    },
    toUrl(url) {
      //轮播图跳转
      window.open(url);
    },
    linkUrl(name) {
      this.navigationFuc(name);
    },
    getRecommBook() {
      //获取推荐位 ---重磅推荐
      getRecommendAPI({ code: this.code["recommendBook"], num: 3 }).then(
        res => {
          res.data.code === 0
            ? (this.recommList = res.data.data.recommendResourceList)
            : Toast(res.data.msg);
        }
      );
    },
    getNewBook() {
      //获取推荐位 ---新书速递
      getRecommendAPI({ code: this.code["newBook"], num: 3 }).then(res => {
        res.data.code === 0
          ? (this.newList = res.data.data.recommendResourceList)
          : Toast(res.data.msg);
      });
    },
    getGoodBook() {
      //获取推荐位 ---华夏好书
      getRecommendAPI({ code: this.code["goodBook"], num: 3 }).then(res => {
        res.data.code === 0
          ? (this.goodList = res.data.data.recommendResourceList)
          : Toast(res.data.msg);
      });
    },
    getMeta() {
      //视频读书
      getRecommendAPI({ code: this.code["mate"], num: 4 }).then(res => {
        res.data.code === 0
          ? (this.mateList = res.data.data.recommendResourceList)
          : Toast(res.data.msg);
      });
    },
    getClassicBook() {
      //获取推荐位 ---经典套书
      getRecommendAPI({ code: this.code["classicsBook"], num: 3 }).then(res => {
        res.data.code === 0
          ? (this.classicsList = res.data.data.recommendResourceList)
          : Toast(res.data.msg);
      });
    },
    linkPage(name, title, type) {
      //推荐位跳转列表页
      this.navigationFuc(name, { title, type });
    },
    // 跳转详情页
    linkDet(name,id) {
      this.navigationFuc(name, { id });
    }
  }
};
</script>

<style>
.index .el-carousel__button {
  width: 10px !important;
}
.el-carousel__container {
  width: 100% !important;
  height: 2.86rem !important;
}
.index .el-rate__icon {
  margin-right: 0 !important;
  font-size: 14px !important;
}
.index .el-rate {
  /* height: 0 !important; */
  line-height: 0 !important;
}
</style>

<style scoped>
.index {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  overflow: hidden;
  padding-top: 0.34rem;
  padding-bottom: 1.72rem;
}
/* tab切换 搜索 消息 */
.index_top {
  padding: 0 0.4rem 0.4rem;
  border-bottom: 0.02rem solid #eeeeee;
  box-sizing: border-box;
  display: flex;
}
.index_tab {
  width: 80%;
  display: flex;
  overflow: hidden;
}
.index_tab .tab_list {
  float: left;
  font-size: 16px;
  color: #b2b1c3;
  font-weight: bold;
  margin-left: 0.63rem;
}
.index .tab_list:first-child {
  margin-left: 0;
}
.index_tab .select {
  color: #fd7068;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 0.06rem solid #fd7068;
}
.search_image {
  width: 0.38rem;
  height: 0.38rem;
}
.login_text {
  font-size: 20px;
  margin-left: 0.12rem;
  margin-top: -0.06rem;
}
.mess_image {
  width: 0.32rem;
  height: 0.38rem;
  margin-left: 0.6rem;
}
/* 搜索框 */
.search_box {
  width: 7rem;
  height: 0.74rem;
  /* line-height: 0.74rem; */
  background: rgba(247, 247, 247, 1);
  border-radius: 0.37rem;
  margin: 0 auto;
  margin-bottom: 0.34rem;
  font-size: 14px;
  color: #939393;
  display: flex;
  align-items: center;
}
.search_box .search_image {
  width: 0.38rem;
  height: 0.38rem;
  float: left;
  margin: 0 0.09rem 0 0.34rem;
}
.index_banner {
  margin-top: 0.42rem;
  height: 2.86rem;
  width: 100%;
  overflow: hidden;
  padding: 0 0.4rem;
  box-sizing: border-box;
}
.img_box {
  height: 2.86rem !important;
}
.img_box img {
  height: 2.86rem;
  width: 100%;
  border-radius: 0.1rem;
}
/* index_recomm 重磅推荐 */
.index_recomm {
  margin-top: 0.4rem;
}
.recomm_list {
  width: 100%;
  border-bottom: 0.02rem solid #eeeeee;
  padding: 0.3rem 0.4rem;
  display: flex;
  box-sizing: border-box;
}
.recomm_list:last-child {
  border-bottom: none;
}
.recomm_cover {
  width: 1.5rem;
  height: 2.1rem;
  border-radius: 0.1rem;
}
.recomm_con {
  flex: 1;
  margin-left: 0.32rem;
}
.recomm_name {
  width: 5rem;
  font-size: 16px;
  color: #5e5f71;
  overflow: hidden;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.recomm_author {
  margin: 0.1rem 0;
  color: #b2b1c3;
  font-size: 12px;
}
.recomm_rate {
  overflow: hidden;
}
.score_text {
  color: #fd7068;
  font-weight: bold;
  font-size: 14px;
  float: left;
}
.rate_num {
  color: #5e5f71;
  font-size: 14px;
  font-weight: bold;
  margin-left: 0.16rem;
  float: left;
  margin-top: -0.03rem;
}
.recomm_intro {
  width: 100%;
  color: #5e5f71;
  font-size: 14px;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
}

/* common header */
.common_title {
  overflow: hidden;
  line-height: 0.7rem;
  margin: 0 0.4rem 0.5rem;
}
.common_left {
  float: left;
  color: #222222;
  font-size: 20px;
  font-weight: bold;
}
.common_right {
  float: right;
  width: 0.43rem;
  height: 0.18rem;
  margin-top: 0.3rem;
}
/* index_book 新书速递 华夏好书 经典套书*/
.index_book {
  margin-top: 0.42rem;
  /* margin-bottom: 0.45rem; */
}
.index_book:last-child .book_wrap {
  padding-bottom: 0;
  border-bottom: none;
}
.book_wrap {
  /* margin-top: 0.2rem; */
  padding: 0 0.4rem 0.4rem;
  box-sizing: border-box;
  display: flex;
  border-bottom: 0.02rem solid #eeeeee;
}
.book_list {
  flex: 1;
  margin-right: 0.41rem;
}
.book_list:last-child {
  margin-right: 0;
}
.book_cover {
  width: 1.96rem;
  height: 2.74rem;
  /* margin-bottom: 0.25rem; */
  border-radius: 0.1rem;
}
.book_name {
  width: 2rem;
  font-size: 14px;
  font-weight: bold;
  color: #5e5f71;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book_author {
  margin: 0.28rem 0 0.1rem;
  color: #b2b1c3;
  font-size: 12px;
  font-weight: 500;
  width: 2rem;
  height: 0.38rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book_rate {
  overflow: hidden;
}
/*index_video 视频读书 */
.index_video {
  margin-top: 0.6rem;
  margin-bottom: 0.45rem;
}
.video_wrap {
  display: flex;
  flex-wrap: wrap;
  /* margin-top: 0.4rem; */
  padding: 0 0.4rem 0.4rem;
  box-sizing: border-box;
  border-bottom: 0.02rem solid #eeeeee;
}
.video_list {
  flex: 1;
}
.video_list:first-child,
.video_list:nth-child(3) {
  margin-right: 0.3rem;
}
.video_list:first-child,
.video_list:nth-child(2) {
  margin-bottom: 0.3rem;
}
.video_item {
  width: 3.2rem;
  height: 1.8rem;
  position: relative;
}
.video_cover {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
.video_icon {
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.2rem;
  margin-top: -0.2rem;
}
/* common_scroll */
.common_scroll {
  width: 100%;
  white-space: nowrap;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/*精选专题  */
.index_subject {
  padding: 0.1rem 0 0 0.3rem;
  background: #fff;
}
.subject_list {
  overflow: hidden;
}
.subject_scroll_view {
  display: inline-block;
  width: 5rem;
  margin-right: 0.3rem;
  vertical-align: top;
}
.subject_scroll_view img {
  width: 5rem;
  height: 2.8rem;
  border-radius: 0.04rem;
}
.subject_scroll_synopsis {
  margin-top: 0.1rem;
}
.subject_synopsis_title {
  width: 5rem;
  font-size: 16px;
  color: #202021;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 0.44rem;
  text-align: left;
  font-weight: bold;
}
.subject_synopsis_con {
  width: 5rem;
  color: #878b94;
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 0.36rem;
  margin-top: 0.06rem;
}
/*实操实例  */
.index_example {
  background: #fff;
  border-top: solid 0.16rem #edeef0;
  margin-top: 0.6rem;
}
.example_list_item {
  padding-bottom: 0.3rem;
  margin-bottom: 0.4rem;
  border-bottom: 0.01rem solid #eeeeee;
}
.example_list_item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.example_top {
  display: flex;
}
.example_left {
  flex: 1;
}
.example_image {
  width: 2rem;
  margin-left: 0.45rem;
}
.example_image image {
  width: 2rem;
  height: 1.5rem;
}
.example_title {
  width: 100%;
  font-size: 16px;
  color: #222222;
  font-weight: bold;
}
.example_synopsis {
  width: 100%;
  font-size: 28rpx;
  color: #878b94;
  line-height: 0.42rem;
  margin-top: 0.27rem;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin-bottom: 0.2rem;
}
.example_bottom {
  font-size: 12px;
  color: #bdc1cb;
}
.example_bottom .example_browse {
  float: right;
}
.index_bottom {
  color: #d5d7e0;
  font-size: 12px;
  margin-bottom: 0.42rem;
  text-align: center;
}
.subject_swiper {
  width: 5.4rem !important;
}
</style>
